<!%start%!>
<div id="[%$_logon_panel_$%]" align="center" class="ui-widget-content" style="width: 400px; height: 200px; position: absolute;">
    <div class="ui-tabs-nav  ui-widget-header ui-corner-all" style="font-size: 14pt;height: 30px; vertical-align: middle; z-index: 1; position: relative; clear: both; margin: 3px;" align="center">
        ĐĂNG NHẬP
    </div>
    <table style="width: 100%; height: 170px;">
        <tr>
            <td valign="middle" align="center">
                <table>
                    <tr>
                        <td width="30" align="left"><b><span>Username:</span></b></td><td align="left"><input id="username" size="30" value="[%&userName&%]"/></td>
                    </tr>
                    <tr>
                        <td align="left"><b><span>Password:</span></b></td><td align="left"><input id="hdPassword" type="password" size="30" value="[%&userPassword&%]"/></td>
                    </tr>
                    <tr>
                        <td colspan="2" align="center" valign="bottom" height="40px"><button onclick="login();">Đăng nhập</button></td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
    <div style="clear:both;"></div>
</div>
<script language="javascript" type="text/javascript">
    var logonPanel = $("#[%$_logon_panel_$%]");
    var widow = $(window);
    logonPanel.css("top", (widow.height() - logonPanel.height())/2);
    logonPanel.css("left", (widow.width() - logonPanel.width())/2);
    widow.resize(function(){
        logonPanel.css("top", (widow.height() - logonPanel.height())/2);
        logonPanel.css("left", (widow.width() - logonPanel.width())/2);
    });
</script>
<!%end%!>